<template>
  <div class="info_page">
    <div class="white_box">
      <div class="theme_txt">活动主题：{{ activityInfo.task_name }}</div>
      <img :src="activityInfo.task_cover" alt="" class="theme_img" />
      <div class="info_box">
        <div class="item_info dis_flex">
          <div class="info_txt">活动当前状态</div>
          <div class="info_desc">{{ getStatus(activityInfo.task_status) }}</div>
        </div>
        <div class="item_info dis_flex">
          <div class="info_txt">活动所属类型</div>
          <div class="info_desc">{{ activityInfo.task_type_name }}</div>
        </div>
        <div class="item_info dis_flex">
          <div class="info_txt">活动举行地点</div>
          <div class="info_desc">{{ activityInfo.task_address }}</div>
        </div>
        <div class="item_info dis_flex">
          <div class="info_txt">活动发布时间</div>
          <div class="info_desc">
            {{ convertTimestampToDateTime(activityInfo.task_time) }}
          </div>
        </div>
        <div class="item_info dis_flex">
          <div class="info_txt">目标参与人数</div>
          <div class="info_desc">{{ activityInfo.task_max_participation }}</div>
        </div>
        <div class="item_info dis_flex">
          <div class="info_txt">活动发布人</div>
          <div class="info_desc">{{ activityInfo.task_user_name }}</div>
        </div>
        <div class="item_info dis_flex">
          <div class="dis_flex">
            <div class="info_txt">我的参与情况</div>
            <div class="info_desc border_right width_97">
              {{ getParticipationStatus(activityInfo.status) }}
            </div>
          </div>
          <div class="dis_flex">
            <div class="info_txt width_68">是否请假</div>
            <div class="info_desc width_68">
              {{ activityInfo.leave_status == 1 ? "是" : "否" }}
            </div>
          </div>
        </div>
        <div class="item_info condition_txt">活动各阶段参与情况</div>
        <div>
          <div class="dis_flex">
            <div class="stage_type flex1">是否已报名</div>
            <div class="stage_type flex1">报名审核</div>
            <div class="stage_type flex1">签到阶段</div>
            <div class="stage_type flex1">实施阶段</div>
          </div>
          <div class="dis_flex">
            <div class="stage_desc flex1">
              <div class="dis_flex">
                <img
                  src="@/assets/images/common/success_icon.png"
                  alt=""
                  class="stage_img"
                />
                <div class="stage_txt">已报名</div>
              </div>
              <div class="stage_time">
                {{ convertTimestampToDateTime(activityInfo.time) }}
              </div>
            </div>
            <div class="stage_desc flex1">
              <div class="dis_flex">
                <img
                  src="@/assets/images/common/success_icon.png"
                  alt=""
                  class="stage_img"
                  v-if="activityInfo.audit_status == 2"
                />
                <img
                  src="@/assets/images/common/fail_icon.png"
                  alt=""
                  class="stage_img"
                  v-else
                />
                <div class="stage_txt">
                  {{ activityInfo.audit_status == 2 ? "允许" : "不允许" }}
                </div>
              </div>
              <div class="stage_time">
                {{
                  activityInfo.audit_time > 0
                    ? convertTimestampToDateTime(activityInfo.audit_time)
                    : "--"
                }}
              </div>
            </div>
            <div class="stage_desc flex1">
              <div class="dis_flex">
                <img
                  src="@/assets/images/common/success_icon.png"
                  alt=""
                  class="stage_img"
                  v-if="activityInfo.is_sign == 1"
                />
                <img
                  src="@/assets/images/common/fail_icon.png"
                  alt=""
                  class="stage_img"
                  v-else
                />
                <div class="stage_txt">
                  {{ activityInfo.is_sign == 1 ? "已签到" : "未签到" }}
                </div>
              </div>
              <div class="stage_time">
                {{
                  convertTimestampToDateTime(activityInfo.sign_time) > 0
                    ? convertTimestampToDateTime(activityInfo.sign_time)
                    : "--"
                }}
              </div>
            </div>
            <div class="stage_desc flex1">
              <div class="dis_flex">
                <img
                  src="@/assets/images/common/fail_icon.png"
                  alt=""
                  class="stage_img"
                  v-if="activityInfo.task_status == 5"
                />
                <img
                  src="@/assets/images/common/success_icon.png"
                  alt=""
                  class="stage_img"
                  v-else
                />
                <div class="stage_txt">
                  {{ getStatus(activityInfo.task_status) }}
                </div>
              </div>
              <div class="stage_time">
                {{ convertTimestampToDateTime(activityInfo.task_start_time) }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 培训讲师介绍 -->
    <div class="head_label" v-if="false">
      <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
      <div class="label_txt">培训讲师介绍</div>
    </div>
    <div class="lecturer_box white_box" v-if="false">
      <div class="dis_flex">
        <div class="dis_flex">
          <img src="" alt="" class="lecturer_img" />
          <div class="dis_flex">
            <div class="lecturer_info">
              <div class="dis_flex">
                <div>贺仁心</div>
                <img
                  src="@/assets/images/common/man.png"
                  alt=""
                  class="gender_icon"
                />
                <div>贺仁心</div>
              </div>
              <div class="lecturer_lable">标签：</div>
              <div class="lecturer_lable">
                IPA国际认证资国际国际认证资国际认认证资v国
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="division_line"></div>
      <div class="lecturer_introduce">
        简介：1955年分配到了卫生部中医研究院现中国中医科学院中药研究所工作至今，中国中医科学院终身研究员、首席研究员...
      </div>
    </div>
  </div>
</template>

<script>
import { convertTimestampToDateTime } from "@/utils/time";
export default {
  props: {
    activityInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  computed: {
    getStatus() {
      return (ss) => {
        if (ss == 1) return "未开始";
        if (ss == 2) return "报名阶段";
        if (ss == 3) return "签到阶段";
        if (ss == 4) return "实施阶段";
        if (ss == 5) return "已结束";
      };
    },
    getParticipationStatus() {
      return (ss) => {
        if (ss == 1) return "报名";
        if (ss == 2) return "签到";
        if (ss == 3) return "参与";
        if (ss == 4) return "爽约";
        if (ss == 5) return "请假";
      };
    },
  },
  methods: {
    convertTimestampToDateTime,
  },
};
</script>

<style lang="less" scoped>
.dis_flex {
  display: flex;
  align-items: center;
}

.just_center {
  justify-content: center;
}

.flex1 {
  flex: 1;
}

.info_page {
  padding: 10px;
  color: #333333;
}

.white_box {
  padding: 19px 10px;
  background: #ffffff;
  border-radius: 6.67px;
}

.theme_txt {
  font-size: 18px;
}

.theme_img {
  width: 100%;
  height: 166.33px;
  margin: 12px 0;
}

.info_box {
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 3.33px;
}

.item_info {
  height: 33.67px;
  line-height: 33.67px;
  // padding: 10px 0;
  border-bottom: 1px solid #cccccc;
}

.info_txt {
  width: 97px;
  padding-left: 7.33px;
  border-right: 1px solid #cccccc;
}

.info_desc {
  padding-left: 10.33px;
}

.border_right {
  border-right: 1px solid #cccccc;
}

.width_68 {
  width: 68px;
}

.width_97 {
  width: 97px;
}

.type_file {
  color: #0090ff;
  font-size: 13.33px;
  line-height: 13.33px;
  text-decoration: underline;
}

.check_btn {
  width: 66.67px;
  height: 26.67px;
  line-height: 26.67px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #2e8ae6;
  border-radius: 5.33px;
  font-size: 12.67px;
  color: #ffffff;
  margin-left: 30px;
}

.condition_txt {
  color: #999999;
  font-size: 11.33px;
  text-align: center;
}

.stage_type {
  text-align: center;
  height: 33.33px;
  background: #f3f4f7;
  color: #555555;
  font-size: 13.33px;
  line-height: 33.33px;
  border-right: 1px solid #cccccc;

  &:last-child {
    border: 0;
  }
}

.stage_desc {
  height: 66.33px;
  border-right: 1px solid #cccccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  &:last-child {
    border: 0;
  }
}

.stage_img {
  width: 11.33px;
  height: 11.33px;
  margin-right: 4px;
}

.stage_txt {
  color: #14c76a;
  font-display: 12px;
  line-height: 12px;
}

.stage_time {
  color: #555555;
  font-size: 12px;
  margin-top: 12px;
}

.head_label {
  display: flex;
  align-items: center;
  margin: 19px 0;
}

.label_img {
  width: 5.33px;
  height: 15.33px;
  margin-right: 11.33px;
}

.label_txt {
  font-weight: bold;
  font-size: 14.67px;
  line-height: 14.67px;
}

.lecturer_box {
  padding: 20px 10px 14px 10px;
}

// .lecturer_info {
//   // margin-bottom: 10px;
//   min-width: 80%;
//   background: red;
// }
.arrow_icon {
  width: 8.67px;
  height: 16px;
  margin-left: 17px;
}

.division_line {
  border-bottom: 1px solid #dddddd;
  margin: 16px 0;
}

.lecturer_introduce {
  line-height: 28px;
  font-size: 14px;
}

.lecturer_img {
  width: 63.33px;
  height: 63.33px;
  border-radius: 8px;
  margin-right: 10.33px;
  background: red;
}

.gender_icon {
  width: 16.67px;
  height: 16.67px;
  margin: 0 9px;
}

.lecturer_age {
  font-size: 14.67px;
}

.lecturer_lable {
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 85%;
}
</style>
